<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="expamle1" style="margin:3rem ;
 border:3rem solid red; padding:5%;
 background-color:yellow; width:200px;
 height:200px; ">
    1.盒子模型.margin,padding,border,width,height,试着画出3者的高度.这3个单位均能应用到和模型的这5个纬度上吗?
    2.margin永远是透明的
    3.width是内容的宽度(整成情况下)
</div>

<div id="expamle2" style="width:300px;height:200px; border:2px solid black;">
    <div style="float:left;width:100px;height:100px;background-color: red"></div>
    <div style="float:left;width:100px;height:100px;background-color: green"></div>
    <div style="float:left;width:100px;height:100px;background-color: blue"></div>
    <li>尝试给这3个div加上黑色1px的边框.</li>
    <li>尝试box-sizing属性</li>
    <li>建一个div，并将他四等分。</li>
</div>
</body>
</html>